<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>计算机专业期末复习甘特图</title>
<style>
  *{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;}
  body{margin:0;padding:20px;background:#f5f7fa;}
  h2{margin-top:0;text-align:center;color:#333;}
  #gantt{background:#fff;border-radius:8px;padding:12px;overflow-x:auto;}
  table{border-collapse:collapse;width:100%;min-width:600px;}
  th,td{white-space:nowrap;padding:6px 10px;border-bottom:1px solid #ebeef5;}
  th{background:#fafafa;font-size:13px;color:#606266;}
  .bar{height:24px;border-radius:12px;color:#fff;font-size:12px;line-height:24px;
       text-align:center;cursor:pointer;position:relative;}
  .bar[data-progress="100%"]{filter:saturate(0.7);}
  .cs     {background:#5470c6;}
  .os     {background:#91cc75;}
  .net    {background:#fac858;}
  .db     {background:#ee6666;}
  .algo   {background:#73c0de;}
  .arch   {background:#3ba272;}
  .buffer {background:#9a60b4;}
</style>
</head>
<body>
<h2>🗓️ 计算机专业期末复习甘特图</h2>
<div id="gantt">
<table id="tbl">
  <thead>
    <tr>
      <th style="width:150px;">任务</th>
      <th style="width:80px;">开始</th>
      <th style="width:80px;">结束</th>
      <th style="width:60px;">进度</th>
      <th>甘特条</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
</div>

<script>
/* ========= 可修改区域 ========= */
const tasks = [
  {name:'计算机组成原理', days:5, color:'arch', progress:0},
  {name:'操作系统',       days:4, color:'os',   progress:0},
  {name:'数据结构与算法', days:4, color:'algo', progress:0},
  {name:'计算机网络',     days:3, color:'net',  progress:0},
  {name:'数据库系统',     days:3, color:'db',   progress:0},
  {name:'编译原理',       days:2, color:'cs',   progress:0},
  {name:'查漏补缺/模拟',  days:2, color:'buffer', progress:0}
];
/* ========= 以下勿动 ========== */

// 工具函数
const fmt = d => d.toISOString().slice(0,10);
const addDays = (d,n) => {const t=new Date(d); t.setDate(t.getDate()+n); return t;};

// 计算日期
const today = new Date();
const first = today;
const totalDays = tasks.reduce((a,t)=>a+t.days,0);
const last  = addDays(today,totalDays-1);

// 生成行
function render(){
  let curr = first;
  const tbody = document.querySelector('#tbl tbody');
  tbody.innerHTML='';
  tasks.forEach(t=>{
    const start = fmt(curr);
    const end   = fmt(addDays(curr,t.days-1));
    const tr=document.createElement('tr');
    tr.innerHTML=`
      <td>${t.name}</td>
      <td contenteditable="true" data-date="${start}">${start}</td>
      <td contenteditable="true" data-date="${end}">${end}</td>
      <td data-progress="${t.progress}" contenteditable="true">${Math.round(t.progress*100)}%</td>
      <td><div class="bar ${t.color}" style="width:${(t.days/totalDays)*100}%;"
                 data-progress="${Math.round(t.progress*100)}%">${Math.round(t.progress*100)}%</div></td>`;
    tbody.appendChild(tr);
    curr = addDays(curr,t.days);
  });
}
render();

// 双击改进度
document.addEventListener('dblclick',e=>{
  if(e.target.classList.contains('bar')){
    const val = prompt('请输入新的进度(0-100):',e.target.dataset.progress);
    if(val!==null){
      const n = Math.max(0,Math.min(100,parseInt(val))) || 0;
      e.target.style.background=`linear-gradient(90deg, ${e.target.className.includes('cs')?'#5470c6':'inherit'} ${n}%, #ddd ${n}%)`;
      e.target.dataset.progress = n + '%';
      e.target.textContent = n + '%';
    }
  }
});
</script>
</body>
</html>